<template>
 <el-container>
		<el-main class="nopadding">
			<el-calendar v-model="toDay">
				<template #dateCell="{data}">
					<div class="calendar-item">
						<h2>{{data.day.split('-')[2]}}</h2>
						<div v-if="getData(data.day) && data.type ==='current-month'" class="calendar-item-info">
							<p><el-progress :percentage="getData(data.day).plan" :show-text="false"></el-progress></p>
							<p><el-progress :percentage="getData(data.day).complete" status="success" :show-text="false"></el-progress></p>
						</div>
					</div>
				</template>
			</el-calendar>
		</el-main>
		<el-aside style="width: 400px;border-left: 1px solid #e6e6e6;">
			<el-container>
				<el-header>
					<h2 class="dayTitle"><el-icon><el-icon-calendar /></el-icon>{{day}}</h2>
				</el-header>
				<el-main>
					<div class="task-list">
						<template v-if="dayItem">
							<el-card shadow="hover" v-for="task in dayItem.tasks" :key="task.id" :class="stateMap[task.state]">
								<h2>{{task.title}}</h2>
								<div class="task-bottom">
									<div class="tags">
										<el-tag type="info" size="small">#{{task.id}}</el-tag>
										<el-tag v-if="task.state === 'open'" type="info" size="small">{{task.state}}</el-tag>
										<el-tag v-if="task.state === 'complete'" type="success" size="small">{{task.state}}</el-tag>
										<el-tag v-if="task.state === 'timeout'" type="danger" size="small">{{task.state}}</el-tag>
									</div>
									<el-avatar :size="20" :src="task.avatar" />
								</div>
							</el-card>
						</template>
						<template v-else>
							<el-empty description="无工作任务" :image-size="100" />
						</template>
					</div>
				</el-main>
			</el-container>
		</el-aside>
	</el-container>
</template>

<script setup>
import {ref, computed} from 'vue'
import {dateFormat} from '@/utils/utils'
import avatar from '@/assets/img/avatar.jpg'

const stateMap = ref({
  open: 'open',
  complete: 'complete',
  timeout: 'timeout'
})
const toDay = ref(new Date(demoDay()))
const data = ref({
  [demoDay()]: {
    plan: 80,
    complete: 66,
    tasks: [
      {
        id: "3601",
        title: "vite2 on demand loading popconfirm style missing",
        avatar,
        state: "complete"
      },
      {
        id: "3602",
        title: "Switch prevent switching invalid",
        avatar,
        state: "complete"
      },
      {
        id: "3603",
        title: "The use of paging in vue3 is inconsistent with the official UI display",
        avatar,
        state: "timeout"
      }
    ]
  },
  [demoDay(1)]: {
    plan: 80,
    complete: 0,
    tasks: [
      {
        id: "3604",
        title: "el-switch @change is auto triggered when page load",
        avatar,
        state: "open"
      }
    ]
  },
  [demoDay(2)]: {
    plan: 80,
    complete: 0,
    tasks: [
      {
        id: "3605",
        title: "locale plugin problem happen in production mode when install element-plus on demand",
        avatar,
        state: "open"
      },
      {
        id: "3606",
        title: "table uses fixed=right, which leads to the dislocation of hover style",
        avatar,
        state: "open"
      }
    ]
  }
})

const day = computed(() => dateFormat(toDay.value, 'yyyy-MM-dd'))
const dayItem = computed(() => day.value)
console.log(day.value)

function getData(date) {
  return data.value[date]
}
function demoDay(n = 0) {
  const curDate = new Date()
  const oneDayTime = 24 * 60 * 60 * 1000
  const rDate = new Date(curDate.getTime() + (oneDayTime * n))
  return dateFormat(rDate, 'yyyy-MM-dd')
}
</script>

<style scoped>
.calendar-item h2 {font-size: 14px;}
.calendar-item-info {margin-top: 15px;}
.calendar-item-info p {margin-top: 5px;}

.task-list .el-card {margin-bottom: 15px;border-left: 5px solid #ddd;cursor: pointer;}

.task-list .el-card.open {border-color: #ddd;}
.task-list .el-card.complete {border-color: #67C23A;}
.task-list .el-card.timeout {border-color: #f56c6c;}

.task-list h2 {font-size: 14px;font-weight: normal;}
.task-bottom {display: flex;justify-content: space-between;align-items: center;margin-top: 10px;}
.task-bottom .tags .el-tag {margin-right: 5px;}
.dayTitle {font-size: 14px;display: flex;align-items: center;}
.dayTitle i {color: #999;margin-right: 10px;}
</style>